import { Popup, TagBox } from 'devextreme-react';
import React, { useCallback, useEffect, useImperativeHandle, useState } from 'react';
import Echarts from './Echarts';

const ChatAnalysisiPupop = React.forwardRef((props: any, ref: any) => {
  const [visible, setVisible] = useState<boolean>(false);
  const [INcome, setINcome] = useState<any>();
  const [INcomeItem, setINcomeItem] = useState<any>();
  const [Liabilities, setLiabilities] = useState<any>(false);
  const [LiabilitiesISitem, setLiabilitiesISitem] = useState<any>([]);
  let LiabilitiesItem: any[] = [];
  let INcomeSelectItem: any[] = [];
  const config = {
    labelLine: {
      length: 15,
      length2: 0,
      maxSurfaceAngle: 80,
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c} ({d}%)',
    },

    label: {
      alignTo: 'edge',
      formatter: '{name|{b}} {time|{d}%}',
      minMargin: 5,
      edgeDistance: 10,
      lineHeight: 15,
      rich: {
        time: {
          fontSize: 10,
          color: '#999',
        },
      },
    },
  };
  // 自定义方法

  useEffect(() => {
    LiabilitiesItem = Liabilities?.series?.data?.map((a: any) => a.name);
  }, [Liabilities]);

  useEffect(() => {
    INcomeSelectItem = INcome?.series?.data?.map((a: any) => a.name);
  }, [INcome]);
  useImperativeHandle(ref, () => ({
    showPupop: async (income: any, data?: any) => {
      setLiabilitiesISitem(data);
      setINcomeItem(income);

      OnclickOksetItem(
        income,
        income.filter((a: any) => a.isItem).map((a: any) => a.type),
        setINcome,
      );

      OnclickOksetItem(
        data,
        data.filter((a: any) => a.isItem).map((a: any) => a.type),
        setLiabilities,
      );
      setVisible(true);
    },
  }));

  const OnclickOksetItem = (sourcedata: any[], selectItem: any[], call: any) => {
    const TempArr = sourcedata.filter((a: any) => selectItem.includes(a.type));
    console.log(TempArr, 'TempArr', sourcedata, selectItem);
    call({
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c} ',
      },
      series: {
        ...config,
        radius: [90, 120],
        type: 'pie',
        data: TempArr.map((a: any) => {
          return { ...a, name: a.type };
        }),
      },
    });
  };

  const OnclickOksetItemUse = useCallback(OnclickOksetItem, []);
  let pie = () => {
    // debugger
    if (props.type?.includes('负债')) {
      return (
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            height: '100%',
            width: '100%' /* 设置容器高度 */,
          }}
        >
          <div style={{ flex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <p style={{ fontWeight: 'bold', textAlign: 'center', marginBottom: '0px' }}>资产:</p>
              <TagBox
                width={150}
                placeholder="请选择项目"
                searchEnabled={true}
                multiline={false}
                valueExpr="type"
                displayExpr="type"
                items={INcomeItem}
                style={{ marginLeft: '5px' }}
                defaultValue={INcomeSelectItem}
                showSelectionControls={true}
                applyValueMode="useButtons"
                onValueChanged={async (e: any) => {
                  const { value } = e;
                  OnclickOksetItemUse(INcomeItem, value, setINcome);
                }}
                maxDisplayedTags={1} //显示为第一项+等几项
                dropDownOptions={{ minWidth: 300, width: 400 }}
              />
            </div>

            <Echarts option={INcome} height={'100%'} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <p style={{ fontWeight: 'bold', marginBottom: '0px' }}>负债: </p>
              <TagBox
                width={150}
                placeholder="请选择项目"
                style={{ marginLeft: '5px' }}
                searchEnabled={true}
                multiline={false}
                valueExpr="type"
                displayExpr="type"
                items={LiabilitiesISitem}
                defaultValue={LiabilitiesItem}
                // value={Liabilities.series.data.map((a: any) =  > a.name)}
                showSelectionControls={true}
                applyValueMode="useButtons"
                onValueChanged={async (e: any) => {
                  const { value } = e;
                  OnclickOksetItemUse(LiabilitiesISitem, value, setLiabilities);
                }}
                maxDisplayedTags={1} //显示为第一项+等几项
                dropDownOptions={{ minWidth: 300, width: 400 }}
              />
            </div>
            <Echarts option={Liabilities} height={'100%'} />
          </div>
        </div>
      );
    } else {
      return (
        <div style={{ height: '100%', width: '100%' }}>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <p style={{ fontWeight: 'bold', marginBottom: '0px' }}>利润</p>
            <TagBox
              width={150}
              placeholder="请选择项目"
              searchEnabled={true}
              multiline={false}
              valueExpr="type"
              displayExpr="type"
              items={INcomeItem}
              style={{ marginLeft: '5px' }}
              defaultValue={INcomeSelectItem}
              showSelectionControls={true}
              applyValueMode="useButtons"
              onValueChanged={async (e: any) => {
                const { value } = e;
                OnclickOksetItemUse(INcomeItem, value, setINcome);
              }}
              maxDisplayedTags={1} //显示为第一项+等几项
              dropDownOptions={{ minWidth: 300, width: 400 }}
            />
          </div>
          <Echarts option={INcome} height={'100%'} />
        </div>
      );
    }
  };
  return (
    <>
      <Popup
        // width={1200}
        contentRender={pie}
        // showTitle={false}
        visible={visible}
        onHiding={() => {
          setVisible(false);
        }}
      />
    </>
  );
});

export default ChatAnalysisiPupop;
